<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录QQ邮箱</title>

  <link rel="shortcut icon" href="./images/qqmail_favicon_96h.png">

  <link rel="stylesheet" href="./css/qqmail.css">

</head>

<body>
  <!-- 整体是上中下布局 -->
  <div class="container">

    <!-- 上方的logo和菜单 -->
    <div class="top-box">

      <div>
        <img src="./images/qqmail_logo_default_35h.e071fb4.png" alt="">
      </div>

      <div>

        <a href="javascript:void(0);">基本版</a>
        <span>|</span>
        <a href="javascript:void(0);">English</a>
        <span>|</span>
        <a href="javascript:void(0);">手机版</a>
        <span>|</span>
        <a href="javascript:void(0);">企业邮箱</a>

      </div>

    </div>

    <div class="center-box">

      <div class="center-line">

        <div>
          <div class="cl01">QQ邮箱，常联系！</div>
          <div class="cl02">
            2500年前，人们飞鸽传书<br>
            183年前，莫尔斯发明了电报<br>
            50年前，第一封电子邮件发出<br>
            今天，QQ邮箱联系你、我、他
          </div>

        </div>

        <div class="climg">
          <img src="./images/tg-chang1ea8a2.png" alt="">
        </div>

        <div>

          <div class="form-box">

            <!-- 标题切换区域 -->
            <div class="ftitle">
              <span style="color: #ccc;">微信登录</span>
              <span>QQ登录</span>
            </div>

            <!-- 表单区域 -->
            <div class="form">

              <div class="f1">密码登录</div>
              <div class="f2">
                推荐使用<span>快捷登录</span>，防止盗号。
              </div>

              <div class="f3">
                <input type="text" placeholder="支持QQ号/邮箱/手机号登录">
              </div>

              <div class="f3">
                <input type="password" placeholder="请输入密码">
              </div>

              <div class="f4">
                登录
              </div>

              <div class="f5">
                <span>找回密码</span>
                <span>注册账号</span>
                <span>意见反馈</span>
              </div>

              <!-- 模拟线条 -->
              <div class="line"></div>

              <div class="f6">
                <input id="r01" type="radio">
                <label for="r01">全选 <span>QQ邮箱</span>将获取以下权限：</label>
              </div>

              <div class="f6">
                <input disabled type="radio">
                <label>使用你的QQ头像、昵称信息</label>
              </div>

              <div class="f6">
                <input id="r02" type="radio">
                <label for="r02">你的QQ好友关系</label>
              </div>

              <div class="f6">
                授权即同意<span>服务协议</span>和<span>QQ隐私保护指引</span>
              </div>

              <div class="f07">
                
                <input id="c01" type="checkbox">
                <label for="c01">
                  下次自动登录
                  <span title="为了确保你的信息安全，请不要在公共电脑上勾选此选项">&copy;</span>
                </label>

              </div>

            </div>


          </div>



        </div>

      </div>

    </div>

    <!-- 下方的链接 -->
    <div class="bottom-box">

      <div class="b01">
        <a href="javascript:void(0);">关于腾讯</a>
        <span>|</span>
        <a href="javascript:void(0);">服务条款</a>
        <span>|</span>
        <a href="javascript:void(0);">隐私政策</a>
        <span>|</span>
        <a href="javascript:void(0);">客服中心</a>
        <span>|</span>
        <a href="javascript:void(0);">联系我们</a>
        <span>|</span>
        <a href="javascript:void(0);">帮助中心</a>
        <span>|</span>
        <a href="javascript:void(0);"> 账号与安全</a>
        <span>|</span>

        <span>©1998 - 2024 Tencent Inc. All Rights Reserved.</span>
      </div>

      <div class="b02">

        <a href="javascript:void(0);">粤公网安备 44030002000001号</a>
        <a href="javascript:void(0);">ICP备案号 粤B2-20090059</a>
        <a href="javascript:void(0);">增值电信业务经营许可证 粤B2-20090059</a>

      </div>


    </div>

  </div>


</body>

</html>